<template>
	<view class="laji">
		<swiper indicator-dots :circular="true" :autoplay="true">
			<swiper-item v-for="item in lunbo" :key="item.id" >
				<image :src="'http://124.93.196.45:10001'+item.imgUrl" style="width: 100%;"></image>
			</swiper-item>
		</swiper>
		<u-button type="error" text="搜索" style="margin-top: 20px; margin-bottom: 20px;" @click="tosearch"></u-button>
		<u-button type="primary" text="分类" @click="tofenlei"></u-button>
		<u-tabs :list="type" :scrollable="false" @click="clicknews"></u-tabs>
		<view class="l1">
			<view class="l2" v-for="item in list" :key="item.id" @click="tonewsdetail(item.id)">
				<view class="l3">
					<text>{{item.title}}</text>
					<text>发布日期：{{item.createTime}}</text>
				</view>
				<image :src="'http://124.93.196.45:10001'+item.imgUrl"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lunbo:[],
				type:[],
				list:[]
			}
		},
		onLoad() {
			this.gtelunbo()
			this.gettype()
			this.getnews()
		},
		methods: {
			gtelunbo(){
				this.api.get('/prod-api/api/garbage-classification/ad-banner/list').then(res=>{
					this.lunbo=res.data.data
				})
			},
			gettype(){
				this.api.get('/prod-api/api/garbage-classification/news-type/list').then(res=>{
					this.type=res.data.rows
				})
			},
			getnews(){
				this.api.get('/prod-api/api/garbage-classification/news/list').then(res=>{
					this.list=res.data.rows
				})
			},
			clicknews(e){
				this.api.get('/prod-api/api/garbage-classification/news/list?type='+e.id).then(res=>{
					this.list=res.data.rows
				})
			},
			tonewsdetail(id){
				uni.navigateTo({
					url:'/pages/serve/laji/newsdetail/newsdetail?id='+id
				})
			},
			tofenlei(){
				uni.navigateTo({
					url:'/pages/serve/laji/lajifenlei/lajifenlei'
				})
			},
			tosearch(){
				uni.navigateTo({
					url:'/pages/serve/laji/lajisoushuo/lajisoushuo'
				})
			}
		}
	}
</script>

<style lang="scss">
.l2{
	display: flex;
	margin-top: 20px;
	.l3{
		line-height: 34px;
		display: flex;
		flex-direction: column;
	}
	image{
		width: 200px;
	}
}
</style>
